@import './variables';

.example {
  width: 100%;
}

.example [data-amplify-authenticator] {
  display: grid;
  max-width: var(--amplify-components-authenticator-max-width);
  margin: auto;
}

.example [data-amplify-authenticator][data-variation='modal'] {
  position: relative;
  width: 100%;
  height: 100%;
  padding: var(--amplify-space-relative-xxxl);
}

.example pre {
  margin: 0;
}

.example-code {
  position: relative;
  background: var(--amplify-colors-background-secondary);
  width: 100%;
}

.example-copy-button {
  background: var(--amplify-colors-background-secondary);
  position: absolute;
  right: var(--amplify-space-medium);
  top: var(--amplify-space-small);
}

@media (max-width: $breakpoint-medium) {
  h2#demo {
    display: none;
  }
}

.docs-component-demo {
  width: 100%;
  margin-bottom: var(--amplify-space-large);

  pre {
    white-space: pre-wrap;
    margin: 0;
  }
}

.example-styling-demo > .amplify-flex {
  align-items: flex-start;
}
